<template class="app-container">
  <div class="cbody">
    <div class="top" v-if="0">
      <el-tooltip effect="dark" :content="title" placement="top-start">
        <span class="toptitle"> {{ title }}</span>
      </el-tooltip>

      <div class="topmenu">
        <!-- <svg-icon icon-class="more" /> -->
        <a class="toplink" v-show="tolink" @click="check()"> 查看更多</a>

        <el-date-picker
          style="width: 190px"
          unlink-panels
          v-model="options"
          type="monthrange"
          value-format="yyyy-MM"
          range-separator="~"
          @change="getDate()"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>

        <el-select
          v-model="assetOption"
          placeholder="次数"
          @change="getDate()"
          v-show="type == 27 || type == 29"
        >
          <el-option
            v-for="item in assetOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <!-- <el-select
            v-model="storeId"
            placeholder="仓库"
            clearable
            @change="getDate()"
            v-show="type == 26 || type == 27 || type == 28 || type == 29"
          >
            <el-option
              v-for="(item, index) in stores"
              :key="index + 1"
              :label="item.storeName"
              :value="item.storeId"
            >
            </el-option>
          </el-select> -->

        <!--
             v-if="type == 39 || type == 40 || type == 41 || type == 42 || type == 43"
            <el-select
            v-if="type != 39 && type != 40 && type != 41 && type != 42 && type != 43"
            v-model="options"
            placeholder="最近一年"
            @change="getDate()"
          >
            <el-option
              v-for="item in commonFun.compoYears"
              :key="item.key"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> -->
      </div>
    </div>
    <div class="main">
      <div id="myChart" ref="mylineChart"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "LineChart", //折线组件
  props: ["type"],
  data() {
    return {
      title: "", //标题
      tolink: "", //更多链接
      data1: [], //类型1数据
      data2: [],
      options: [],
      assetOption: 0,
      assetOptions: [
        {
          value: 0,
          label: "次数",
        },
        {
          value: 1,
          label: "数量",
        },
      ],
      storeId: null,
      stores: [], //仓库项
      lineData: [
        [-12, 37, -69, -2, -48, 67, 94],
        [-48, -4, 41, -3, 19, -60, 7],
      ], //y轴数据
      xdata: ["", "", ""], //x轴数据
    };
  },

  created() {
    // this.init();
  },

  beforeDestroy() {
    /* 页面组件销毁的时候，别忘了移除绑定的监听resize事件，否则的话，多渲染几次
      容易导致内存泄漏和额外CPU或GPU占用*/
    window.removeEventListener("resize", () => {
      this.$echarts.init(this.$refs.mylineChart).resize();
    });
  },
  methods: {
    //刷新
    refresh() {
      this.init();
    },

    //触发更新数据
    // getDate() {
    //   console.log(this.options);
    //   if (!this.options) {
    //     this.options = this.commonFun.compoYears[0].value;
    //   }
    //   this.getData();
    // },

    // check() {
    //   this.$router.push({ path: this.tolink });
    // },

    makeSeries(arr) {
      try {
        let colorArr = [
          "#409EFF",
          "#2FD052",
          "#FAC06A",
          "#DC52FF",
          "#FF6161",
          "#F0A2F2",
        ];
        let valArr = [];
        if (arr && arr.length > 0) {
          for (let index = 0; index < arr.length; index++) {
            valArr.push({
              name: arr[index],
              type: "line",
              data: this.lineData[index],
              color: colorArr[index],
              symbolSize: 6, //设定实心点的大小
              label: {
                show: true, // 在折线拐点上显示数据
                fontSize: 8,
                color: "#fff",
                fontWeight: 10,
                // position: 'top',
                // formatter: function (data) {
                //   return data.value;
                // },
              },
              itemStyle: { normal: { label: { show: true } } },
              areaStyle: {
                origin: "start",
                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(64, 158, 255, 0.2)",
                  },
                  {
                    offset: 1,
                    color: "rgba(64, 158, 255, 0)",
                  },
                ]),
              },
            });
          }
          //console.log(valArr);
          return valArr;
        } else {
          return [
            {
              name: "",
              type: "line",
              data: this.lineData[0],
              color: "#409EFF",
              symbolSize: 6, //设定实心点的大小
              label: {
                show: true, // 在折线拐点上显示数据
                fontSize: 8,
                color: "#fff",
                fontWeight: 10,
              },
              itemStyle: { normal: { label: { show: true } } },
              areaStyle: {
                origin: "start",
                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(64, 158, 255, 0.2)",
                  },
                  {
                    offset: 1,
                    color: "rgba(64, 158, 255, 0)",
                  },
                ]),
              },
            },
          ];
        }
      } catch (error) {
        return [
          {
            name: "",
            type: "line",
            data: this.lineData[0],
            color: "#409EFF",
            symbolSize: 6, //设定实心点的大小
            label: {
              show: true, // 在折线拐点上显示数据
              fontSize: 8,
              color: "#fff",
              fontWeight: 10,
            },
            itemStyle: { normal: { label: { show: true } } },
            areaStyle: {
              origin: "start",
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(64, 158, 255, 0.2)",
                },
                {
                  offset: 1,
                  color: "rgba(64, 158, 255, 0)",
                },
              ]),
            },
          },
        ];
      }
    },

    //计算总数
    getTotal(arr) {
      // console.log(arr.length, this.lineData.length);
      if (arr != null && arr.length > 0) {
        try {
          let flag = false;
          arr.forEach((e) => {
            if (
              e == "总数" ||
              e == "数量" ||
              String(e).includes("总数") ||
              String(e).includes("数量")
            ) {
              flag = true;
            }
          });

          if (flag) {
            if (arr.length > 0 && arr.length == this.lineData.length) {
              let data = "";
              // for (let i = 0; i < arr.length; i++) {
              //   let total = 0;
              //   this.lineData[i].forEach((e) => {
              //     total += Number(e);
              //   });
              //   let newi = arr[i] + '(' + total + ')';
              //   data += newi;
              // }
              let total = 0;
              //追加判断条件，如果有时间选择的话选最后一个数据
              //当前折线图都有时间选择 默认取最后一个数据
              // this.lineData[0].forEach((e) => {
              //   total += Number(e);
              // });
              total = this.lineData[0][this.lineData[0].length - 1];

              //部分总数统计不符合情况无法区分仅保留需要统计的总数
              if (this.type == 46) {
                return (data = "总数(" + total + ")");
              }

              return data;
            } else {
              return "";
            }
          } else {
            return "";
          }
        } catch (error) {
          return "";
        }
      } else {
        return "";
      }
    },

    //初始化图标配置
    InitOptions(arr = null) {
      let option = {
        title: {
          text: this.getTotal(arr),
          // left: '10',
          // top: '10',
          textStyle: {
            fontSize: 17,
          },
        },

        tooltip: {
          trigger: "axis",
          textStyle: {
            align: "left",
            color: "#666666",
            fontSize: "15px",
          },
          // backgroundColor: 'rgba(82,82,82,0.4)',
          backgroundColor: "rgba(255,255,255)",
          //borderColor: 'rgba(82,82,82,0.4)',
        },
        legend: {
          //字体对应折线标识
          data: arr != null ? [...arr] : [""],
          // right: '25%',
          left: "center",
          top: "5%",
          icon: "rect",
          textStyle: {
            color: "#666666",
            fontSize: "14px",
          },
          itemWidth: 10, // 长方形宽度
          itemHeight: 10, // 长方形高度
        },
        //折线图位置
        grid: {
          left: "4%",
          right: "4%",
          bottom: "1%",
          top: "24%",
          containLabel: true, //刻度标签
        },
        xAxis: {
          boundaryGap: false,
          axisLabel: {
            rotate: 35, // 设置斜度
            fontSize: "13px", //文字的字体大小
            color: "#666666",
          },
          axisTick: {
            //x轴刻度
            show: false,
          },
          axisLine: {
            //x轴线样式
            show: false,
            lineStyle: {
              color: "#ccc",
              // type: [0, 5],
              // dashOffset: 5,
              width: 3, //线的粗细程度    (用数字表示)
              type: "solid", //线的类型        (可选solid  dotted  dashed)
              opacity: 1, //线的透明度        (用0~1的小数表示)
            },
          },
          data: this.xdata,
        },
        yAxis: {
          type: "value",
          //interval: 10, //y轴间隔
          //min: 0, //y轴最小
          //   max: Math.max.apply(
          //     Math,
          //     this.lineData.reduce((acc, val) => acc.concat(val), []),
          //   ), //y轴最大
          // splitNumber: 10,
          //网格线
          splitLine: {
            show: true, //是否显示
            lineStyle: {
              //网格线样式
              color: "#E4E6ED", //网格线颜色
              width: 1, //网格线的加粗程度
              type: "solid", //网格线类型 border: 1px solid #E4E6ED
            },
          },
          axisLabel: {
            color: "#666666",
            fontSize: "15px",
          },
        },

        series: this.makeSeries(arr),
      };

      var myChart = this.$echarts.init(this.$refs.mylineChart);
      myChart.clear();
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },

    reMarkstockNum() {
      this.InitOptions(["次数", "数量"]);
    },
  },
};
</script>

<style lang="scss" scoped>
.cbody {
  background: #fff;
  height: 100%;
  .top {
    background: #fff;
    padding: 0 20px;
    height: 60px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e4e6ed;
    .toptitle {
      font-family: Alibaba PuHuiTi 2;
      font-size: 20px;
      font-weight: 500;
      line-height: 60px;
      letter-spacing: 0em;
      text-align: left;
      width: auto;
      overflow: hidden;
    }
    .toptitle:first-child:before {
      content: "\00a0 ";
      border-left: 3px solid #4da0ff;
      margin-right: 5px;
    }
    .toplink {
      float: right;
      background: #409eff;
      width: 100px;
      height: 35px;
      border-radius: 4px;
      font-family: Alibaba PuHuiTi 2;
      font-size: 16px;
      font-weight: 500;
      line-height: 35px;
      letter-spacing: 0em;
      text-align: center;
      color: #fff;
      margin: auto 0;
      margin-left: 20px;
    }
    span {
      margin: 0px;
      color: #333;
      font-family: Alibaba PuHuiTi 2;
      font-size: 20px;
      font-style: normal;
      font-weight: 500;
      line-height: 60px;
    }
    a {
      margin-top: 3px;
      color: #409eff;
      font-family: Alibaba PuHuiTi 2;
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: 60px;
      text-transform: capitalize;
      cursor: pointer;
    }
    .topmenu {
      margin: auto 0;
      height: 40px;
      display: flex;
      justify-content: flex-end;
      .el-select {
        height: 40px;
        width: 120px;
        margin-left: 10px;
        float: right;
      }
    }
  }
  .main {
    //     height: 100%;
    // overflow: auto;
    #myChart {
      width: 100%;
      height: 300px;
    }
  }
}
</style>
